<template>
    <div class="search-bar flex">
        <div class="icon-search"></div>
        <div class="text">购物车</div>
        <div class="infor"></div>
    </div>
    
</template>

<script>
export default {
    name: "SearchCarts",
    data() {
        return {
            
        }
    }
}
</script>

<style lang="less" scoped>
    .search-bar{
        display: flex;
        height: 1.3rem;
        width: 100%;
        background:linear-gradient(to top,#EF191C 0%,#E60106 100%);
        padding-top: 0.4rem;
        box-sizing: border-box;
        color: #fff;

        .icon-search,.infor,.text{
            flex: 1;
        }
        .icon-search{
            background: url("../../assets/images/box1/icon-search.png") no-repeat center left 0.3rem;
            background-size: 0.45rem 0.45rem; 
            // border: 1px solid blue;  
        }
        .text{
            text-align: center; 
            line-height: 0.9rem;
            font-size: 0.26rem;
            // border: 1px solid green;
        }
        .infor{
            background-position: 85% 50%;
            // border: 1px solid yellow;
        }
        
    } 
</style>